
import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, ScrollView, Image, Dimensions, PixelRatio, Text } from 'react-native';

import FirstButton from './commonComponent/button';

const _windows = Dimensions.get('window');

class TestFlexMode extends Component {
    constructor(props) {
        super(props);
        this.onPressButton = this.onPressButton.bind(this);
    }

    onPressButton (){
        if (this.props.title){
            this.props.clickAction(this.props.index);
        }
    }

    // false
    render(){
        return (
            <ScrollView >
                <View style={styles.flexContainer}>
                    <View style={styles.cell1}>
                        <Text style={styles.cellText}> cell1 </Text>
                    </View>
                    <View style={styles.cell2}>
                        <Text style={styles.cellText}> cell2 </Text>
                    </View>
                    <View style={styles.cell3}>
                        <Text style={styles.cellText}> cell3 </Text>
                    </View>
                </View>

                <Text style={styles.windowText} numberOfLines={3} >
                    屏幕宽: window.width={_windows.width + '\n'}
                    屏幕高: window.height={_windows.height + '\n'}
                    像素比: pixelRatio={PixelRatio.get()}
                </Text>

                <Text style={styles.numberLineText}   >
                    react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html
                </Text>

                <View>
                    <Text style={styles.welcome}> 100px height without resizeMode </Text>
                    <Image style={{height: 100}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />

                    <Text style={styles.welcome}> 100px height with resizeMode contain </Text>
                    <View style={[{ backgroundColor: '#fe0000'}]}>
                        <Image style={{height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
                    </View>

                    <Text style={styles.welcome}> 100px height with resizeMode cover </Text>
                    <View style={[{backgroundColor: '#fe0000'}]}>
                        <Image style={{ height: 100, resizeMode: Image.resizeMode.cover}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
                    </View>

                    <Text style={styles.welcome}> 100px height with resizeMode stretch </Text>
                    <View style={[{ backgroundColor: '#fe0000'}]}>
                        <Image style={{ height: 100, resizeMode: Image.resizeMode.stretch}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
                    </View>

                    <Text style={styles.welcome}> set height to image container </Text>
                    <View style={[{backgroundColor: '#fe0000', height: 100}]}>
                        <Image style={{flex: 1}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
                    </View>
                </View>
            </ScrollView>
        );
    }
}

//                 <FirstButton title='车险' index={4} select={true} clickAction={this.onPressButton}/>

const styles = StyleSheet.create({
    flexContainer: {
        // 容器需要添加direction才能变成让子元素flex
        flexDirection: 'row'
    },
    cell1: {
        flex: 1,
        height: 50,
        backgroundColor:'red'
    },
    cell2: {
        flex: 2,
        height: 50,
        backgroundColor:'blue'
    },
    cell3: {
        flex: 1,
        height: 50,
        backgroundColor:'green'
    },
    cellText: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    windowText: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        backgroundColor:'white'
    },
    numberLineText:{
        fontSize: 20,
       // textAlign: 'center',
        // height: 24,
        margin: 10,
        backgroundColor:'white'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
});

export default TestFlexMode ;